<template>
    <h2 style="text-align: center;">
        用户详细信息注册页</h2>
        <table class="table-bodered" border="1" >
            <tr>
                <td>真实姓名</td>
                <td>
                    <input type="text" placeholder="请输入真实姓名" v-model="info.U_Name">
                </td>
            </tr>
            <tr>
                <td>联系方式</td>
                <td>
                    <input type="text"  placeholder="请输入联系方式" v-model="info.U_Phone">
                </td>
            </tr>
            <tr>
                <td>性别</td>
                <td>
                    <input type="radio"  name="Usex" value="false" checked v-model="info.U_Sex">男
                    <input type="radio"  name="Usex" value="true" v-model="info.U_Sex">女
                </td>
            </tr>
            <tr>
                <td>身份证号</td>
                <td>
                    <input type="text"  placeholder="请输入身份证号" v-model="info.U_IdCard" @change="DateSub">
                </td>
            </tr>
            <tr>
                <td>出生日期</td>
                <td>
                    <input type="date" v-model="info.U_Date" >
                </td>
            </tr>
            <tr>
                <td>年收入</td>
                <td>
                    <input type="text" placeholder="请输入年收入" v-model="info.U_Income">
                </td>
            </tr>
            <tr>
                <td>用户类型</td>
                <td>
                    <select v-model="info.UT_Id">
                        <option value="0">--请选择--</option>
                        <option  v-for="i in UTinfo" :value="i.UT_Id" >{{ i.UT_Name }}</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <input type="button" value="提交" @click="SaveData" class="btn btn-success">
                </td>
            </tr>
        </table>
</template>
<script setup lang="ts">
import { useRoute } from 'vue-router';
import { onMounted, ref} from 'vue';
import axios from 'axios';
//创建实例
const route = useRoute();
const Uid=route.params.Uid;
console.log(Uid);
const UTinfo=ref([
    {
        UT_Id:0,
        UT_Name:""
    }
]
)
//生命周期函数U•ェ•*U
onMounted(()=>{
    LoadUserType()
})
//完成用户类型信息加载
const LoadUserType=()=>{
   axios({
    url:"https://localhost:44358/api/Users/ShowUserType",
    method:"get"
   })
   .then(res=>{
    UTinfo.value=res.data
   })
   .catch(err=>{
    console.log(err)
   })
}
const info=ref(
    {
        U_Name:"",
        U_Phone:"",
        U_Sex:false,
        U_IdCard:"",
        U_Date:"",
        U_Income:"",
        UT_Id:0
    }
)

//完成用户详细信息注册
const SaveData=()=>{
    //判断真实姓名不能为空
    if(info.value.U_Name==""){
        alert("真实姓名不能为空")
        return;
    }
    //判断联系方式不能为空
    if(info.value.U_Phone==""){
        alert("联系方式不能为空")
        return;
    }
    //正则验证手机号格式
    var TelYz=/^(13[0-9]|14[5-7]|15[0-35-9]|166|17[0-8]|18[0-9]|19[89])\d{8}$/
    if(!TelYz.test(info.value.U_Phone)){
        alert("手机号格式不正确")
        return;
    }
    //正则验证身份证号
    var CardId=/^([1-6][1-9]|50)\d{4}(18|19|20)\d{2}((0[1-9])|10|11|12)(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
    if(!CardId.test(info.value.U_IdCard)){
        alert("身份证号格式不正确")
        return;
    }
    //判断身份证号不能为空
    if(info.value.U_IdCard==""){
        alert("身份证号不能为空")
        return;
    }
    //判断年收入不能为空
    if(info.value.U_Income==""){
        alert("年收入不能为空")
        return;
    }
    //判断年收入只能是数字
    if(isNaN(Number(info.value.U_Income))){
        alert("年收入只能为数字")
        return;
    }
    //判断用户类型不能为空
    if(info.value.UT_Id==0){
        alert("用户类型不能为空")
        return;
    }
    //判断出生日期不能为空
    if(info.value.U_Date==""){
        alert("出生日期不能为空")
        return;
    }
    
    //判断用户类型不能为空
    if(info.value.UT_Id==0){
        alert("用户类型不能为空")
        return;
    }
    //判断出生日期不能为空
    if(info.value.U_Date==""){
        alert("出生日期不能为空")
        return;
    }

    axios.post("https://localhost:44358/api/Users/AddUserRegister",
        {
            U_Id:Uid,
            U_Name:info.value.U_Name,
            U_Phone:info.value.U_Phone,
            U_Sex:info.value.U_Sex,
            U_IdCard:info.value.U_IdCard,
            U_Date:info.value.U_Date,
            U_Income:info.value.U_Income,
            UT_Id:info.value.UT_Id
        }
    )
    .then(res=>{
        if(res.data>0){
            alert("用户详细信息完善成功")
        }
        else{
            alert("用户详细信息完善失败")
        }
        }
    )
    .catch(err=>{
        console.log(err)
    }
    )

}
const DateSub=()=>{
    var Birthday = info.value.U_IdCard.substring(6,10)+"-"+info.value.U_IdCard.substring(10,12)+"-"+info.value.U_IdCard.substring(12,14)
    info.value.U_Date
    info.value.U_Date=Birthday
}


</script>
